<template>
  <div>
    <ul>
      <li
        v-for="item in datalist"
        :key="item.filmId"
        @click="handleClick(item.id)"
      >
        <img :src="item.poster" />
        <b>{{ item.name }}</b>
        <p
          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
        >
          主演:{{ item.actors | actorFilter }}
        </p>
        <p>{{ item.nation }}|{{ item.runtime }}分钟</p>
        <br />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
Vue.filter('actorFilter', (actors) => {
  if (actors == null) {
    return '暂无主演'
  }
  return actors.map((item) => item.name).join(' ')
})

export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=20&type=1&k=7852341',
      headers: {
        'X-Client-Info':
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1638017656169397805121537","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.list'
      },
      method: 'get'
    }).then((res) => {
      // console.log(res.data.data.films)
      this.datalist = res.data.data.films
    })
  },
  methods: {
    handleClick (id) {
      // this.$router.push(`/detail/${id}`)

      //   this.$router.push({
      //     name: "detail",
      //     params: {
      //       myid: id,
      //     },
      //   });

      this.$router.push(`/detail?myid=${id}`)
    }
  }
}
</script>
<style scoped>
li {
  overflow: hidden;
}
img {
  float: left;
  width: 100px;
  height: 100px;
}
</style>
